[[ define "news/index.html" ]]
<!-- 如果多级目录中的文件名相同时，需要在html文件中声明一下别名，供后端发送html()时使用，避免加载模板文件被替换掉-->

[[template "head" .]] <!-- 调用定义的公共头部模板文件 -->




<!-- 页面标题区域 -->
<section class="py-12 bg-gradient-to-r from-primary/10 to-secondary/10">
    <div class="container mx-auto px-4">
        <div class="text-center max-w-3xl mx-auto">
            <h1 class="text-4xl md:text-5xl font-bold text-base-content mb-6">新闻资讯</h1>
            <p class="text-xl text-base-content/70">了解最新动态、行业资讯和公司新闻</p>
        </div>
    </div>
</section>

<!-- 新闻列表区域 -->
<section class="py-16 bg-base-100">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            <!-- 新闻列表 -->
            <div class="space-y-8">
                <!-- 新闻1 -->
                <div class="bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                    <div class="p-6 md:p-8">
                        <div class="flex flex-col md:flex-row md:items-start gap-6">
                            <!-- 新闻图片 -->
                            <div class="md:w-1/4">
                                <div class="rounded-lg overflow-hidden aspect-video md:aspect-square">
                                    <img src="/assets/img/news1.jpg" alt="新闻图片" 
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                </div>
                            </div>
                            
                            <!-- 新闻内容 -->
                            <div class="md:w-3/4">
                                <div class="flex items-center mb-3">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-primary/20 text-primary text-sm font-medium mr-3">
                                        公司动态
                                    </span>
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-calendar mr-1"></i>2025-01-20
                                    </span>
                                </div>
                                
                                <h3 class="text-xl md:text-2xl font-bold text-base-content mb-4 group-hover:text-primary transition-colors duration-300">
                                    公司荣获"年度科技创新企业"大奖
                                </h3>
                                
                                <p class="text-base-content/70 mb-4 line-clamp-3">
                                    在近日举办的科技创新峰会上，我司凭借在软件开发和人工智能领域的卓越表现，荣获"年度科技创新企业"大奖。这是对公司技术实力和创新能力的充分肯定。
                                </p>
                                
                                <div class="flex justify-between items-center mt-4">
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-eye mr-1"></i>阅读量：1,245
                                    </span>
                                    <a href="/news/1" class="btn btn-outline btn-primary btn-sm">
                                        阅读全文 <i class="fa fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 新闻2 -->
                <div class="bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                    <div class="p-6 md:p-8">
                        <div class="flex flex-col md:flex-row md:items-start gap-6">
                            <!-- 新闻图片 -->
                            <div class="md:w-1/4">
                                <div class="rounded-lg overflow-hidden aspect-video md:aspect-square">
                                    <img src="/assets/img/news2.jpg" alt="新闻图片" 
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                </div>
                            </div>
                            
                            <!-- 新闻内容 -->
                            <div class="md:w-3/4">
                                <div class="flex items-center mb-3">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-secondary/20 text-secondary text-sm font-medium mr-3">
                                        产品更新
                                    </span>
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-calendar mr-1"></i>2025-01-15
                                    </span>
                                </div>
                                
                                <h3 class="text-xl md:text-2xl font-bold text-base-content mb-4 group-hover:text-secondary transition-colors duration-300">
                                    全新版本V3.0正式发布，功能全面升级
                                </h3>
                                
                                <p class="text-base-content/70 mb-4 line-clamp-3">
                                    我们很高兴地宣布，产品全新版本V3.0正式发布。本次更新包含多项功能增强和性能优化，提升了用户体验和系统稳定性，助力企业数字化转型。
                                </p>
                                
                                <div class="flex justify-between items-center mt-4">
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-eye mr-1"></i>阅读量：2,367
                                    </span>
                                    <a href="/news/2" class="btn btn-outline btn-secondary btn-sm">
                                        阅读全文 <i class="fa fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 新闻3 -->
                <div class="bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                    <div class="p-6 md:p-8">
                        <div class="flex flex-col md:flex-row md:items-start gap-6">
                            <!-- 新闻图片 -->
                            <div class="md:w-1/4">
                                <div class="rounded-lg overflow-hidden aspect-video md:aspect-square">
                                    <img src="/assets/img/news3.jpg" alt="新闻图片" 
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                </div>
                            </div>
                            
                            <!-- 新闻内容 -->
                            <div class="md:w-3/4">
                                <div class="flex items-center mb-3">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-accent/20 text-accent text-sm font-medium mr-3">
                                        行业资讯
                                    </span>
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-calendar mr-1"></i>2025-01-10
                                    </span>
                                </div>
                                
                                <h3 class="text-xl md:text-2xl font-bold text-base-content mb-4 group-hover:text-accent transition-colors duration-300">
                                    人工智能技术发展论坛在京成功举办
                                </h3>
                                
                                <p class="text-base-content/70 mb-4 line-clamp-3">
                                    我司作为协办单位参与了在京举办的人工智能技术发展论坛。论坛汇聚了行业专家和企业代表，共同探讨AI技术发展趋势和产业应用前景。
                                </p>
                                
                                <div class="flex justify-between items-center mt-4">
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-eye mr-1"></i>阅读量：1,892
                                    </span>
                                    <a href="/news/3" class="btn btn-outline btn-accent btn-sm">
                                        阅读全文 <i class="fa fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 新闻4 -->
                <div class="bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                    <div class="p-6 md:p-8">
                        <div class="flex flex-col md:flex-row md:items-start gap-6">
                            <!-- 新闻图片 -->
                            <div class="md:w-1/4">
                                <div class="rounded-lg overflow-hidden aspect-video md:aspect-square">
                                    <img src="/assets/img/news4.jpg" alt="新闻图片" 
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                </div>
                            </div>
                            
                            <!-- 新闻内容 -->
                            <div class="md:w-3/4">
                                <div class="flex items-center mb-3">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-primary/20 text-primary text-sm font-medium mr-3">
                                        合作伙伴
                                    </span>
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-calendar mr-1"></i>2025-01-05
                                    </span>
                                </div>
                                
                                <h3 class="text-xl md:text-2xl font-bold text-base-content mb-4 group-hover:text-primary transition-colors duration-300">
                                    与知名科技公司达成战略合作协议
                                </h3>
                                
                                <p class="text-base-content/70 mb-4 line-clamp-3">
                                    我司与国内知名科技公司正式签署战略合作协议。双方将在技术创新、市场拓展等方面展开深度合作，共同推动行业发展。
                                </p>
                                
                                <div class="flex justify-between items-center mt-4">
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-eye mr-1"></i>阅读量：1,543
                                    </span>
                                    <a href="/news/4" class="btn btn-outline btn-primary btn-sm">
                                        阅读全文 <i class="fa fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 新闻5 -->
                <div class="bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                    <div class="p-6 md:p-8">
                        <div class="flex flex-col md:flex-row md:items-start gap-6">
                            <!-- 新闻图片 -->
                            <div class="md:w-1/4">
                                <div class="rounded-lg overflow-hidden aspect-video md:aspect-square">
                                    <img src="/assets/img/news5.jpg" alt="新闻图片" 
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                </div>
                            </div>
                            
                            <!-- 新闻内容 -->
                            <div class="md:w-3/4">
                                <div class="flex items-center mb-3">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-neutral/20 text-neutral text-sm font-medium mr-3">
                                        团队建设
                                    </span>
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-calendar mr-1"></i>2024-12-28
                                    </span>
                                </div>
                                
                                <h3 class="text-xl md:text-2xl font-bold text-base-content mb-4 group-hover:text-neutral transition-colors duration-300">
                                    公司成功举办年度技术培训活动
                                </h3>
                                
                                <p class="text-base-content/70 mb-4 line-clamp-3">
                                    为提升团队技术水平，公司举办了为期一周的年度技术培训活动。培训涵盖了最新技术趋势、开发实践等内容，取得了良好效果。
                                </p>
                                
                                <div class="flex justify-between items-center mt-4">
                                    <span class="text-base-content/60 text-sm">
                                        <i class="fa fa-eye mr-1"></i>阅读量：1,028
                                    </span>
                                    <a href="/news/5" class="btn btn-outline btn-neutral btn-sm">
                                        阅读全文 <i class="fa fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页控件 -->
            <!-- <div class="mt-12 flex justify-center">
                <div class="join">
                    <button class="join-item btn btn-outline">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button class="join-item btn btn-primary">1</button>
                    <button class="join-item btn btn-outline">2</button>
                    <button class="join-item btn btn-outline">3</button>
                    <button class="join-item btn btn-outline">4</button>
                    <button class="join-item btn btn-outline">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                </div>
            </div> -->


        </div>
    </div>
</section>

<style>
/* 新闻卡片样式 */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 分类按钮激活状态 */
.btn.active {
    background-color: var(--primary);
    color: var(--primary-content);
    border-color: var(--primary);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 分类筛选按钮
    const categoryButtons = document.querySelectorAll('.btn.btn-outline.btn-sm');
    categoryButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 移除所有激活状态
            categoryButtons.forEach(btn => btn.classList.remove('active'));
            // 添加当前激活状态
            this.classList.add('active');
            
            // 这里可以添加筛选逻辑
            const category = this.textContent.trim();
            console.log('筛选分类：', category);
        });
    });
    
    // 分页按钮
    const pageButtons = document.querySelectorAll('.join .btn-outline, .join .btn-primary');
    pageButtons.forEach(button => {
        button.addEventListener('click', function() {
            if (!this.classList.contains('btn-primary')) {
                // 移除所有激活状态
                pageButtons.forEach(btn => {
                    btn.classList.remove('btn-primary');
                    btn.classList.add('btn-outline');
                });
                // 设置当前为激活状态
                this.classList.remove('btn-outline');
                this.classList.add('btn-primary');
            }
        });
    });
    
    // 订阅按钮
    const subscribeBtn = document.querySelector('.btn-primary[type="button"]');
    if (subscribeBtn) {
        subscribeBtn.addEventListener('click', function() {
            const emailInput = this.parentElement.parentElement.querySelector('input[type="email"]');
            const email = emailInput.value.trim();
            
            if (!email) {
                alert('请输入邮箱地址');
                return;
            }
            
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                alert('请输入有效的邮箱地址');
                return;
            }
            
            alert('订阅成功！我们将定期为您发送最新新闻资讯。');
            emailInput.value = '';
        });
    }
});
</script>


[[template "foot" .]] <!-- 调用定义的公共底部模板文件 -->

[[end]]